<!-- 个人信息 -->
<template>
  <view class="container">
    <view class="message">
      <view class="u-flex u-row-between u-p-x-30 info-head">
        <view class="info-title">个人信息</view>
      </view>
      <view class="user-list u-flex u-row-between">
        <text class="list-name">头像</text>
        <!-- #ifdef H5 -->
        <view class="u-flex" @tap="changePhoto">
          <image class="avatar" :src="userData.avatar" mode=""></image>
          <text
            class="u-iconfont uicon-arrow-right u-m-l-20"
            style="color: #999; font-size: 26rpx"
          ></text>
        </view>
        <!-- #endif -->

        <!-- #ifdef MP-WEIXIN -->

        <view class="u-flex weixinBtn">
          <button
            open-type="chooseAvatar"
            @chooseavatar="chooseavatar"
            class="phoBtn"
          >
            <image class="avatar" :src="userData.avatar" mode=""></image>
            <text
              class="u-iconfont uicon-arrow-right u-m-l-20"
              style="color: #999; font-size: 26rpx"
            ></text>
          </button>
        </view>
        <!-- #endif -->
      </view>
      <view
        class="user-list u-flex u-row-between"
        @click="onclickHandle('', 'setName', {})"
      >
        <text class="list-name">昵称</text>
        <view class="u-flex">
          <text class="list-val">{{ userData.nickname }}</text>
          <text
            class="u-iconfont uicon-arrow-right u-m-l-20"
            style="color: #999; font-size: 26rpx"
          ></text>
        </view>
      </view>
      <view class="user-list u-flex u-row-between" @click="showGender = true">
        <text class="list-name">性别</text>
        <view class="u-flex">
          <text class="list-val">{{ setGender }}</text>
          <text
            class="u-iconfont uicon-arrow-right u-m-l-20"
            style="color: #999; font-size: 26rpx"
          ></text>
        </view>
      </view>
      <view
        class="user-list u-flex u-row-between"
        @click="onclickHandle('', 'setPhone', {})"
      >
        <text class="list-name">绑定手机号</text>
        <view class="u-flex">
          <text class="list-val">{{ userData.mobile }}</text>
          <text
            class="u-iconfont uicon-arrow-right u-m-l-20"
            style="color: #999; font-size: 26rpx"
          ></text>
        </view>
      </view>
    </view>
    <view class="common">
      <view class="u-flex u-row-between u-p-x-30 info-head">
        <view class="info-title">通用</view>
      </view>
      <view
        class="user-list u-flex u-row-between"
        @click="onclickHandle('', 'real_name_authentication', {})"
      >
        <text class="list-name">实名认证</text>
        <view class="u-flex">
          <text class="list-val">已认证</text>
          <text
            class="u-iconfont uicon-arrow-right u-m-l-20"
            style="color: #999; font-size: 26rpx"
          ></text>
        </view>
      </view>
      <view
        class="user-list u-flex u-row-between"
        @click="onclickHandle('', 'sound_setting', {})"
      >
        <text class="list-name">声音设置</text>
        <view class="u-flex">
          <text
            class="u-iconfont uicon-arrow-right u-m-l-20"
            style="color: #999; font-size: 26rpx"
          ></text>
        </view>
      </view>
    </view>
    <view class="about">
      <view class="u-flex u-row-between u-p-x-30 info-head">
        <view class="info-title">关于</view>
      </view>
      <view
        class="user-list u-flex u-row-between"
        @click="onclickHandle('', 'about', { data: 'personalData' })"
      >
        <text class="list-name">个人信息收集清单</text>
        <view class="u-flex">
          <text
            class="u-iconfont uicon-arrow-right u-m-l-20"
            style="color: #999; font-size: 26rpx"
          ></text>
        </view>
      </view>
      <view
        class="user-list u-flex u-row-between"
        @click="onclickHandle('', 'about', { data: 'thirdPartyData' })"
      >
        <text class="list-name">第三方信息共享清单</text>
        <view class="u-flex">
          <text
            class="u-iconfont uicon-arrow-right u-m-l-20"
            style="color: #999; font-size: 26rpx"
          ></text>
        </view>
      </view>
      <view
        class="user-list u-flex u-row-between"
        @click="onclickHandle('', 'about', { data: 'privacyData' })"
      >
        <text class="list-name">隐私政策摘要</text>
        <view class="u-flex">
          <text
            class="u-iconfont uicon-arrow-right u-m-l-20"
            style="color: #999; font-size: 26rpx"
          ></text>
        </view>
      </view>
      <view class="user-list u-flex u-row-between">
        <text class="list-name">当前版本</text>
        <view class="u-flex">
          <text class="list-val">1.1.0</text>
          <text
            class="u-iconfont uicon-arrow-right u-m-l-20"
            style="color: #999; font-size: 26rpx"
          ></text>
        </view>
      </view>
    </view>
    <view class="id_box">
      <view class="xian"></view>
      <text class="xian_id">ID:{{ userData.user_id }}</text>
      <view class="xian"></view>
    </view>
    <view class="btn-box u-flex u-row-center u-col-center">
      <button
        hover-class="hover-logout-btn"
        class="u-reset-button logout-btn"
        @tap="showModal = true"
      >
        退出登录
      </button>
    </view>

    <!-- 登录提示 -->
    <shopro-auth-modal v-if="authType"></shopro-auth-modal>

    <u-modal
      ref="uModal"
      v-model="showModal"
      :show-cancel-button="true"
      confirm-color="#F54141"
      cancel-color="#666666"
      @confirm="confirmLogOut"
      content="确定退出登录？"
    ></u-modal>

    <!-- 选择性别弹出框 -->
    <u-popup v-model="showGender" mode="bottom">
      <view class="selectGender">
        <view class="title">选择性别</view>
        <view class="tishi">还有一步就完成了欧~</view>
        <view class="box">
          <view
            class="box_sel"
            @click="onclickHandle('', 'selectGender', { gender: index })"
            v-for="(item, index) in genderList"
            :key="index"
          >
            <img :src="item.url" alt="" />
            <text>{{ item.sex }}</text>
          </view>
        </view>
        <view class="btn" @click="showGender = false">取消</view>
      </view>
    </u-popup>
    <!-- #ifdef H5 -->
    <!-- 更换头像弹出框 -->
    <u-popup v-model="showPhoto" mode="bottom">
      <view class="touxiang_box">
        <!-- <view class="setWeixinPho">
          <text>使用微信头像</text>
          <img :src="weixinPhotoURL" alt="" />
        </view> -->
        <view class="takePhoto" @click="onTakeImg">拍照</view>
        <view class="toxiangce" @click="onChooseImg">从相册选择</view>
        <view class="quxiao" @click="showPhoto = false">取消</view>
      </view>
    </u-popup>
    <!-- #endif -->
  </view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import Auth from '@/shopro/permission/index.js';
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);

export default {
  data() {
    return {
      platform: this.$platform.get(),
      userData: {},
      // showCalendar: false,
      showModal: false,
      showGender: false,
      id: 1,
      showPhoto: false,
      weixinPhotoURL: '',
      genderList: [
        {
          url:
            this.$IMG_URL +
            '/uploads/20230609/55081bd5c64e700e317220bd340a09ab.jpg',
          sex: '男',
        },
        {
          url:
            this.$IMG_URL +
            '/uploads/20230609/be86099fb8a60dd3b3e7f6d560d5bb7f.jpg',
          sex: '女',
        },
      ],
      gender: '',
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'authType']),
    setGender() {
      return this.userData.gender == 0 ? '女' : '男';
    },
  },
  onLoad() {
    this.userData = JSON.parse(JSON.stringify(this.userInfo));
  },
  onShow() {
    this.userData = JSON.parse(JSON.stringify(this.userInfo));
  },
  watch: {},
  methods: {
    ...mapActions(['getUserInfo', 'showAuthModal', 'logout']),
    changePhoto() {
      this.showPhoto = true;
      uni.getUserProfile({
        desc: '获取微信头像',
        success: (res) => {
          this.weixinPhotoURL = res.userInfo.avatarUrl;
        },
      });
    },
    // 修改手机号
    bindMobile() {
      !this.userInfo.verification.mobile && this.showAuthModal('bindMobile');
    },
    // 退出登录
    confirmLogOut() {
      this.logout();
      // this.$Router.back();
      uni.reLaunch({
        url: 'pages/index/user',
      });
    },
    // 修改信息
    editUserInfo() {
      let that = this;
      if (!that.userData.nickname) {
        this.$u.toast('昵称不能为空');
        return false;
      }
      that
        .$http(
          'user.profile',
          {
            nickname: that.userData.nickname,
            birthday: that.userData.birthday,
            avatar: that.userData.fileUrl,
            gender: that.gender,
          },
          '保存中...'
        )
        .then(async (res) => {
          if (res.code === 1) {
            let data = await that.getUserInfo();
            this.userData = JSON.parse(JSON.stringify(this.userInfo));
            that.$u.toast('保存成功');
          }
        });
    },
    // #ifdef H5
    // 照片更换头像
    async onChooseImg() {
      let authState = 0;
      authState += await new Auth('writePhotosAlbum').check();
      if (authState < 1) return;
      authState += await new Auth('camera').check();
      if (authState < 2) return;
      const chooseImageRes = await this.chooseImage(1);

      const uploadImageRes = await this.uploadImage(chooseImageRes[0]);

      this.userData.avatar = uploadImageRes.fullurl;
      this.userData.fileUrl = uploadImageRes.url;
      this.editUserInfo();
      this.showPhoto = false;
    },
    //拍照跟换头像
    async onTakeImg() {
      let authState = 0;
      authState += await new Auth('writePhotosAlbum').check();
      if (authState < 1) return;
      authState += await new Auth('camera').check();
      if (authState < 2) return;
      const chooseImageRes = await this.takeImage(1);
      const uploadImageRes = await this.uploadImage(chooseImageRes[0]);
      this.userData.avatar = uploadImageRes.fullurl;
      this.userData.fileUrl = uploadImageRes.url;
      this.editUserInfo();
      this.showPhoto = false;
    },
    //拍照
    async takeImage(count = 1) {
      return new Promise((resolve, reject) => {
        uni.chooseImage({
          count: count, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['camera'], //拍照
          success: (res) => {
            resolve(res.tempFilePaths);
          },
        });
      }).catch((e) => {});
    },
    // 图片处理-选择图片
    async chooseImage(count = 1) {
      return new Promise((resolve, reject) => {
        uni.chooseImage({
          count: count, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: (res) => {
            resolve(res.tempFilePaths);
          },
        });
      }).catch((e) => {});
    },
    // #endif
    // 图片处理-上传图片
    async uploadImage(url) {
      const that = this;
      return new Promise((resolve, reject) => {
        that.$u.toast('上传中...');
        uni.uploadFile({
          url: that.$BASE_URL + '/api/common/upload',
          filePath: url,
          name: 'file',
          header: { token: uni.getStorageSync('token') },
          success: (res) => {
            res = JSON.parse(res.data);
            if (res.code === 1) {
              that.$u.toast('上传成功');
              resolve(res.data);
            } else {
              that.$u.toast('上传失败');
            }
          },
          complete: (e) => {
            uni.hideLoading();
          },
        });
      }).catch((e) => {});
    },
    // #ifdef MP-WEIXIN
    //微信小程序修改头像
    async chooseavatar(e) {
      const uploadImageRes = await this.uploadImage(e.detail.avatarUrl);
      this.userData.avatar = uploadImageRes.fullurl;
      this.userData.fileUrl = uploadImageRes.url;
      this.editUserInfo();
    },
    // #endif
    //修改昵称
    setName() {
      this.$Router.push({
        path: '/pages/user/setInfo/setName',
        query: {
          userData: JSON.stringify(this.userData),
        },
      });
    },
    setPhone() {
      this.$Router.push({
        path: '/pages/user/setInfo/setPhone',
        query: {
          userData: JSON.stringify(this.userData),
        },
      });
    },
    //设置性别
    selectGender(gender) {
      if (gender == 1) {
        this.gender = 0;
      } else {
        this.gender = 1;
      }
      this.editUserInfo();
      this.showGender = false;
    },
    //实名认证
    realNameAuthentication() {
      this.$Router.push({
        path: '/pages/user/setInfo/real_name_authentication',
        query: {},
      });
    },
    //声音设置
    soundSetting() {
      this.$Router.push({
        path: '/pages/user/setInfo/sound_setting',
        query: {},
      });
    },
    //关于
    about(e) {
      this.$Router.push({
        path: '/pages/user/setInfo/about',
        query: { type: e },
      });
    },
    onclickHandle(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          case 'setName':
            this.setName();
            break;
          case 'setPhone':
            this.setPhone();
            break;
          case 'selectGender':
            this.selectGender(data.gender);
            break;
          case 'real_name_authentication':
            this.realNameAuthentication();
            break;
          case 'sound_setting':
            this.soundSetting();
            break;
          case 'about':
            this.about(data.data);
            break;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 基本信息
.info-head {
  .info-title {
    font-size: 24rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #979797;
    margin-top: 24rpx;
    margin-bottom: 24rpx;
  }

  .save-btn {
    color: #fff;
    background: linear-gradient(
      90deg,
      rgba(233, 180, 97, 1),
      rgba(238, 204, 137, 1)
    );
    width: 100rpx;
    border-radius: 30rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
  }

  .dis-btn {
    opacity: 0.5;
  }
}

// 三方
.other-account {
  .head-title {
    line-height: 82rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
  }

  .list-img {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }

  .account-list {
    background-color: #fff;
    height: 100rpx;
    padding: 0 20rpx;

    .info {
      .avatar {
        width: 38rpx;
        height: 38rpx;
        border-radius: 50%;
        overflow: hidden;
      }

      .name {
        font-size: 28rpx;
        font-weight: 400;
        color: #999999;
      }
    }

    .bind-box {
      .bind-btn {
        padding: 0 20rpx;
        line-height: 60rpx;
        background: #f5f6f8;
        border-radius: 20rpx;
        color: #999;
      }

      .relieve-btn {
        border-radius: 20rpx;
        padding: 0 20rpx;
        line-height: 60rpx;
        background: rgba(#ff0000, 0.05);
        color: #ff0000;
      }
    }
  }
}

// 个人信息项
.user-list {
  background: #fff;
  height: 100rpx;
  border-bottom: 1rpx solid #f6f6f6;
  padding: 0 20rpx;

  .list-name {
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 700;
    color: #3d3d3d;
  }

  .avatar {
    width: 67rpx;
    height: 67rpx;
    border-radius: 50%;
  }

  .list-val {
    color: #999;
    font-size: 28rpx;
  }
}

.btn-box {
  margin-top: 31rpx;
  padding-bottom: 20rpx;
  .logout-btn {
    width: 640rpx;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 40rpx;
    color: #3d3d3d;
    background: #ffffff;
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 700;
    color: #3d3d3d;
  }

  .hover-logout-btn {
    width: 640rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #a084f0;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #ffffff;
    font-family: PingFang SC-Bold, PingFang SC;
  }
}
.selectGender {
  height: 665rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  position: relative;
  .title {
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #3d3d3d;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    margin-top: 70rpx;
    padding-left: 142rpx;
    padding-right: 142rpx;
  }
  .tishi {
    font-size: 24rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #979797;
    height: 34rpx;
    line-height: 34rpx;
    text-align: center;
    margin-top: 12rpx;
    margin-bottom: 47rpx;
    padding-left: 142rpx;
    padding-right: 142rpx;
  }
  .box {
    height: 224rpx;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 142rpx;
    padding-right: 142rpx;
    .box_sel {
      height: 224rpx;
      width: 171rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      img {
        width: 171rpx;
        height: 171rpx;
      }
      text {
        font-size: 30rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 400;
        color: #3d3d3d;
      }
    }
  }
  .btn {
    width: 100%;
    height: 153rpx;
    line-height: 153rpx;
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #979797;
    text-align: center;
    border-top: 12rpx #f2f2f2 solid;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.touxiang_box {
  height: 665rpx;
  width: 100%;
  .setWeixinPho {
    height: 195rpx;
    width: 100%;
    padding: 0 31rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2rpx solid #efefef;
    text {
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
    }
    img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-left: 20rpx;
    }
  }
  .takePhoto {
    width: 100%;
    height: 153rpx;
    padding: 0 31rpx;
    line-height: 153rpx;
    text-align: center;
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #3d3d3d;
    border-bottom: 2rpx solid #efefef;
    box-sizing: border-box;
  }
  .toxiangce {
    width: 100%;
    height: 153rpx;
    padding: 0 31rpx;
    line-height: 153rpx;
    text-align: center;
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #3d3d3d;
  }
  .quxiao {
    width: 100%;
    height: 153rpx;
    line-height: 153rpx;
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #979797;
    text-align: center;
    border-top: 12rpx #f2f2f2 solid;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 31rpx;
  }
}
// .xian {
//   /deep/ .u-divider {
//     background-color: none !important;
//     margin-top: 30rpx !important;
//   }
// }
.id_box {
  width: 100%;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32rpx;
  .xian {
    width: 140rpx;
    height: 0rpx;
    border-bottom: 1rpx solid rgba(151, 151, 151, 0.2);
  }
  .xian_id {
    color: rgba(151, 151, 151, 0.6);
    margin-left: 15rpx;
    margin-right: 15rpx;
  }
}
.weixinBtn {
  .phoBtn {
    background-color: #fff;
    display: flex;
    padding: 0 0 !important;
  }
  button::after {
    border: none !important;
  }
}
</style>
